<!doctype html>
<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <title>网页开发助手 - make website</title>

    <link href="favicon.ico" rel="shortcut icon">
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta name="description" content="一个简洁、美观的图形化网页编辑器">
    <meta name="keywords" content="网页开发,图形化,blockly,积木编程,编辑器,网页开发助手">
    <meta name="author" content="技术云科技开发团队">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="./css/editor.css" rel="stylesheet" />
    <script src="./js/blockly.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/sweetalert.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/jquery.growl.js" type="text/javascript"></script>
    <link href="./css/jquery.growl.css" rel="stylesheet" type="text/css" />
    <link href="./css/main.css" rel="stylesheet" />

    <script src="./js/main.js"></script>
    <script src="./js/years.js"></script>
    
    <link href="./highlight/prism-okaidia.min.css" rel="stylesheet" />
    
    <script src="./introjs/intro.js"></script>
    <link href="./introjs/intro.css" rel="stylesheet" />

    <script src="./format/standalone.js"></script>
    <script src="./format/plugins/html.js"></script>

    <script>
        $(document).ready(function() {
            var timer = setInterval(function() {
                $("#start_page").slideUp(500);
            }, 200);
        });
    </script>

    <script src="./js/f12.js"></script>

    <script src="./js/html2canvas.js"></script>
</head>

<body>
    <script src="./js/icon.js"></script>
    <div id="start_page">
        <h1>网页开发助手</h1>
        <h3 id="text"></h3>
    </div>

    <a class="gitrepo" href="https://gitee.com/jsy-1/make-website"><img alt="Fork me on Gitee" src="https://gitee.com/jsy-1/make-website/widgets/widget_5.svg"></a>

    <button id="qq">遇到问题?</button>
    <a href="./markdown.html">
        <button id="markdown">markdown编辑器</button>
    </a>
    <a href="./editor/code_editor.html">
        <button id="html_editor">HTML编辑器</button>
    </a>

    <button id="dao" data-intro="这里可以导入和导出积木数据，方便储存" data-title="导入导出">导</button>
   
    <button id="take-photo" data-intro="点击此处将你的效果预览区截图并保存，分享给你的好友" data-title="预览区截图">拍照</button>

    <header class="navbar" data-intro="这里是站点导航栏，通往不同的页面" data-title="导航栏">
        <ul>
            <li>
                <a href="#" style="
              font-size: 15px;
              text-decoration: none;
              color: white;
              font-weight: bold;
              background-color: rgb(199, 29, 36);
              border-radius: 10px;
              padding: 10px;
              margin-right: 20px;
              white-space: nowrap;
            ">网页开发助手</a>
            </li>
            <li id="code_open" data-intro="点这里可以把积木块转化成真实代码" data-title="生成代码" title="生成代码">
                <a href="javascript:void(0)">
                    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                        <path d="M305.4 21.8c-1.3-10.4-9.1-18.8-19.5-20C276.1 .6 266.1 0 256 0c-11.1 0-22.1 .7-32.8 2.1c-10.3 1.3-18 9.7-19.3 20l-2.9 23.1c-.8 6.4-5.4 11.6-11.5 13.7c-9.6 3.2-19 7.2-27.9 11.7c-5.8 3-12.8 2.5-18-1.5l-18-14c-8.2-6.4-19.7-6.8-27.9-.4c-16.6 13-31.5 28-44.4 44.7c-6.3 8.2-5.9 19.6 .5 27.8l14.2 18.3c4 5.1 4.4 12 1.5 17.8c-4.4 8.8-8.2 17.9-11.3 27.4c-2 6.2-7.3 10.8-13.7 11.6l-22.8 2.9c-10.3 1.3-18.7 9.1-20 19.4C.7 234.8 0 245.3 0 256c0 10.6 .6 21.1 1.9 31.4c1.3 10.3 9.7 18.1 20 19.4l22.8 2.9c6.4 .8 11.7 5.4 13.7 11.6c3.1 9.5 6.9 18.7 11.3 27.5c2.9 5.8 2.4 12.7-1.5 17.8L54 384.8c-6.4 8.2-6.8 19.6-.5 27.8c12.9 16.7 27.8 31.7 44.4 44.7c8.2 6.4 19.7 6 27.9-.4l18-14c5.1-4 12.2-4.4 18-1.5c9 4.6 18.3 8.5 27.9 11.7c6.1 2.1 10.7 7.3 11.5 13.7l2.9 23.1c1.3 10.3 9 18.7 19.3 20c10.7 1.4 21.7 2.1 32.8 2.1c10.1 0 20.1-.6 29.9-1.7c10.4-1.2 18.2-9.7 19.5-20l2.8-22.5c.8-6.5 5.5-11.8 11.7-13.8c10-3.2 19.7-7.2 29-11.8c5.8-2.9 12.7-2.4 17.8 1.5L385 457.9c8.2 6.4 19.6 6.8 27.8 .5c2.8-2.2 5.5-4.4 8.2-6.7L451.7 421c1.8-2.2 3.6-4.4 5.4-6.6c6.5-8.2 6-19.7-.4-27.9l-14-17.9c-4-5.1-4.4-12.2-1.5-18c4.8-9.4 9-19.3 12.3-29.5c2-6.2 7.3-10.8 13.7-11.6l22.8-2.8c10.3-1.3 18.8-9.1 20-19.4c.2-1.7 .4-3.5 .6-5.2V230.1c-.2-1.7-.4-3.5-.6-5.2c-1.3-10.3-9.7-18.1-20-19.4l-22.8-2.8c-6.4-.8-11.7-5.4-13.7-11.6c-3.4-10.2-7.5-20.1-12.3-29.5c-3-5.8-2.5-12.8 1.5-18l14-17.9c6.4-8.2 6.8-19.7 .4-27.9c-1.8-2.2-3.6-4.4-5.4-6.6L421 60.3c-2.7-2.3-5.4-4.5-8.2-6.7c-8.2-6.4-19.6-5.9-27.8 .5L366.7 68.3c-5.1 4-12.1 4.4-17.8 1.5c-9.3-4.6-19-8.6-29-11.8c-6.2-2-10.9-7.3-11.7-13.7l-2.8-22.5zM287.8 162.6l-32 192c-1.5 8.7-9.7 14.6-18.4 13.2s-14.6-9.7-13.2-18.4l32-192c1.5-8.7 9.7-14.6 18.4-13.2s14.6 9.7 13.2 18.4zM187.3 227.3L158.6 256l28.7 28.7c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6l40-40c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6zm160-22.6l40 40c6.2 6.2 6.2 16.4 0 22.6l-40 40c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6L353.4 256l-28.7-28.7c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0z" />
                    </svg>
                </a>
            </li>
            <li id="look_open" data-intro="点这里可以把积木运行起来，查看网站效果" data-title="运行代码" title="运行代码">
                <a href="javascript:void(0)">
                    <svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
                         <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z" />
                    </svg>
                </a>
            </li>
            <li title="复制代码">
                <a id="copycode" href="javascript:void(0)">
                    <svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">

                        <path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z" />
                    </svg>
                </a>
            </li>
            <li title="新手教程">
                <a onclick="intro()">
                    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                        <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
                    </svg>
                </a>
            </li>
            <li title="官网">
                <a href="welcome.html">
                    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                        <path d="M352 256c0 22.2-1.2 43.6-3.3 64H281.8l12.6-42.8c10.7-36.4-23.1-70.3-59.6-59.6l-74.6 21.9c.4-16.3 1.5-32.2 3.1-47.5H348.7c2.2 20.4 3.3 41.8 3.3 64zM20.4 280.6c-7.1 2.1-13.1 5.5-18.1 9.9C.8 279.2 0 267.7 0 256c0-22.1 2.8-43.5 8.1-64H131.2c-1.9 18.4-2.9 37.4-3.1 57L20.4 280.6zM231.4 491.6L272.4 352h71.9c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512c-7.2 0-16.3-3.1-27.3-13.4c1-2.2 1.9-4.6 2.7-7.1zM380.8 192H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-325.7 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7H167.7zm-32.4 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM493.4 352c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4zM39 308.5l204.8-60.2c12.1-3.6 23.4 7.7 19.9 19.9L203.5 473c-4.1 13.9-23.2 15.6-29.7 2.6l-28.7-57.3c-.7-1.3-1.5-2.6-2.5-3.7l-88 88c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l88-88c-1.1-1-2.3-1.9-3.7-2.5L36.4 338.2c-13-6.5-11.3-25.6 2.6-29.7z" />
                    </svg>
                </a>
            </li>
        </ul>
    </header>

    <div id="blocklyDiv" data-intro="你可以在这里拖拽积木，制作网页" data-title="工作区">
        <xml id="toolbox" style="display: none" xmlns="https://developers.google.com/blockly/xml">
            <category categorystyle="mind-mapping" name="基本框架">

                <block type="go">
                    <field name="title">hello</field>
                    <field name="unicode">utf-8</field>
                </block>

                <block type="end"></block>

            </category>

            <sep></sep>

            <category categorystyle="tag" name="文字内容">

                <block type="h1">
                    <field name="text">text</field>
                    <field name="id">id</field>
                </block>

                <block type="h2">
                    <field name="text">text</field>
                    <field name="id">id</field>
                </block>

                <block type="h3">
                    <field name="text">text</field>
                    <field name="id">id</field>
                </block>

                <block type="p">
                    <field name="text">text</field>
                    <field name="id">id</field>
                </block>

                <block type="link">
                    <field name="text">百度</field>
                    <field name="link">https://baidu.com</field>
                </block>

            </category>

            <sep></sep>

            <category categorystyle="pic-aiipi3n9" name="图片资源">

                <block type="image">
                    <field name="img">a.png</field>
                    <field name="height">10</field>
                    <field name="width">10</field>
                </block>

            </category>

            <sep></sep>

            <category categorystyle="switch-button" name="交互组件">
                <block type="button">
                    <field name="text">按钮文本</field>
                    <field name="link">http://baidu.com</field>
                </block>
            </category>

            <sep></sep>

            <category categorystyle="dome-light" name="装饰组件">

                <block type="center_go"></block>

                <block type="center_end"></block>

                <block type="line"></block>

            </category>

            <sep></sep>

            <category categorystyle="text-style-one" name="界面样式">

                <block type="style">
                    <field name="who">a</field>
                </block>

                <block type="text_color">
                    <field name="color">red</field>
                </block>

                <block type="text_size">
                    <field name="size">10</field>
                </block>

            </category>

            <sep></sep>

            <category categorystyle="devices" name="高级脚本">

                <block type="js"></block>

                <block type="alert"></block>

                <block type="text">
                    <field name="TEXT"></field>
                </block>

            </category>

            <sep></sep>

            <category categorystyle="memory-one" custom="VARIABLE" name="变量"></category>

            <sep></sep>

            <category categorystyle="calculator" name="数学计算">

                <block type="math_constant">
                    <field name="CONSTANT">PI</field>
                </block>

                <block type="math_number">
                    <field name="NUM">123456</field>
                </block>

                <block type="math_arithmetic">
                    <field name="OP">ADD</field>
                    <value name="A">
                        <shadow type="math_number">
                            <field name="NUM">1</field>
                        </shadow>
                    </value>

                    <value name="B">
                        <shadow type="math_number">
                            <field name="NUM">1</field>
                        </shadow>
                    </value>
                </block>

                <block type="math_modulo">
                    <value name="DIVIDEND">
                        <shadow type="math_number">
                            <field name="NUM">102</field>
                        </shadow>
                    </value>

                    <value name="DIVISOR">
                        <shadow type="math_number">
                            <field name="NUM">10</field>
                        </shadow>
                    </value>
                </block>

                <block type="math_single">
                    <field name="OP">ROOT</field>
                    <value name="NUM">
                        <shadow type="math_number">
                            <field name="NUM">9</field>
                        </shadow>
                    </value>
                </block>

            </category>

            <sep></sep>

            <category categorystyle="code" name="其他">

                <block type="code">
                    <field name="code_txt">&lt;span&gt;自定义&lt;/span&gt;</field>
                </block>

            </category>
        </xml>
        <xml id="workspaceBlocks" style="display: none" xmlns="https://developers.google.com/blockly/xml"></xml>
    </div>

    <pre ><code id="code" class="language-html"></code></pre>
    <div id="look"></div>

    <div id="n"></div>

    <div id="import">

        <h1>导入/导出</h1>

        <hr>

        <div class="input-section">
            <input id="data" placeholder="请输入积木数据" type="text">
            <button id="a">导入积木</button>
        </div>

        <hr>

        <div class="input-section">
            <p>积木数据:</p>
            <input id="json" disabled placeholder="请先导出积木" type="text">
            <button id="b">导出积木</button>
        </div>

    </div>

    <script src="./js/renderer.js"></script>

    <script src="./blocks/msg.js"></script>

    <script src="./blocks/get.js"></script>

    <script src="./blocks/get.js.js"></script>
    
        
    <script src="./highlight/prism.min.js"></script>

    <script src="./workspace/workspace.js"></script>

    <div id="nav">
        <h5 id="copy">
            Copyright (C) 2020-<span id="years"></span> JSY Developer Team.
        </h5>
    </div>
    
    <script>Prism.highlightAll();</script>

</body>

</html>